<template>
  <div class="pageHeader flex-rs">
    <div class="content flex-rs">
      <img :src="defaultImg" class="logo" alt @click="goHome" />
      <el-menu :default-active="this.$route.path" :router="routerLink" mode="horizontal" class="el-menu-demo" @select="handleSelect">
        <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">{{ item.navItem }}</el-menu-item>
      </el-menu>
      <el-input placeholder="搜索课程" v-model="searchContent" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="searchCourse"></el-button>
      </el-input>
      <!-- 未登录 -->
      <div class="loginArea" v-if="!token">
        <span :class="type == 0 ? 'isActive' : ''" @click="login">登录</span>
        <span :class="type == 1 ? 'isActive' : ''" @click="register">注册</span>
      </div>
      <!-- 已登录 -->
      <el-dropdown @command="handleCommand" v-if="token">
        <span class="el-dropdown-link avator flex-rs">
          <img v-if="pictureUrl" :src="config.imgPath + pictureUrl" alt />
          <el-avatar v-else icon="el-icon-user-solid"></el-avatar>
          <span>{{ username }}</span>
        </span>
        <el-dropdown-menu slot="dropdown" class="pullDown_Menu">
          <el-dropdown-item command="personalCenter">个人中心</el-dropdown-item>
          <el-dropdown-item command="mySign">扫码签到</el-dropdown-item>
          <el-dropdown-item command="myStudy">我的学习</el-dropdown-item>
          <el-dropdown-item command="testRecords">考试记录</el-dropdown-item>
          <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
          <el-dropdown-item command="messageCenter">消息中心</el-dropdown-item>
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dialog title="扫码签到" :close-on-click-modal="false" :visible.sync="dialogVisible" width="20%" :before-close="handleClose">
        <div v-loading="loading">
          <img v-if="qrPhoto" :src="config.imgPath + qrPhoto" alt />
        </div>
        <el-form v-if="!qrPhoto" :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item prop="title">
            <el-input v-model="ruleForm.title" placeholder="请输入会议标题"></el-input>
          </el-form-item>
          <el-form-item prop="content">
            <el-input type="textarea" v-model="ruleForm.content" placeholder="请输入会议内容"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "pageHeader",
  data() {
    return {
      token: this.tool.getCookie("xinyun-front-token") ? this.tool.getCookie("xinyun-front-token") : "",
      username: "",
      pictureUrl: "",
      defaultImg: require("@/assets/img/home/logo.png"),
      searchContent: "",
      routerLink: false,
      dialogVisible: false,
      loading: true,
      qrPhoto: "",
      searchFlag: 1,
      ruleForm: {
        title: "",
        content: ""
      },
      rules: {
        title: [{ required: true, message: "必填项", trigger: "blur" }],
        content: [{ required: true, message: "必填项", trigger: "blur" }]
      },
      type: -1,
      navList: [
        { name: "/home", navItem: "首页" },
        { name: "/courseware/index", navItem: "学习课件" },
        { name: "/entranceExam/index", navItem: "考试入口" },
        { name: "/examTest/index", navItem: "真题测试" },
        { name: "/vrEducation/index", navItem: "VR教育" },
        { name: "/videoconferencing/index", navItem: "视频会议" }
      ]
    };
  },
  watch: {
    $route: {
      handler(val) {
        if (val.name == "login") {
          this.type = 0;
        }
      },
      immediate: true
    }
  },
  created() {
    this.routerLink = this.token ? true : false;
    if (this.token && this.tool.getCookie("xinyun-front-userInfo")) {
      this.username = JSON.parse(this.tool.getCookie("xinyun-front-userInfo")).name;
      this.pictureUrl = JSON.parse(this.tool.getCookie("xinyun-front-userInfo")).icon;
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.createQrCode();
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleSelect(key, keyPath) {
      let token = this.config.token;
      if (["/courseware/index", "/entranceExam/index", "/examTest/index"].includes(key) && !token) {
        this.$message({
          message: "您尚未登录，请先登录！",
          type: "error"
        });
        this.$router.push({
          path: "/login"
        });
      }
      if (["/home"].includes(key)) {
        this.$router.push({
          path: "/home"
        });
      }
      if (["/vrEducation/index"].includes(key)) {
        window.location.href = "sydqs://";
      }
      if (["/videoconferencing/index"].includes(key)) {
        window.location.href = "https://bmeeting.huaweicloud.com/#/login";
      }
    },
    // 查询课程
    selectCourse(name) {
      let that = this;
      that
        .$http({
          url: "/wisdomlearn/courseware/selectAllCourseware",
          method: "post",
          data: {
            name,
            pageSize: "12",
            pageIndex: "1"
          }
        })
        .then(res => {
          if (res.retCode == "00000") {
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    goHome() {
      this.$router.push({
        path: "/home"
      });
    },
    handleCommand(command) {
      switch (command) {
        case "personalCenter":
          this.$router.push({
            path: "/personalCenter"
          });
          break;
        case "mySign":
          this.dialogVisible = true;
          this.getQrCode();
          break;
        case "myStudy":
          this.$router.push({
            path: "/personalCenter"
          });
          break;
        case "testRecords":
          this.$router.push({
            path: "/personalCenter"
          });
          break;
        case "changePassword":
          this.$router.push({
            path: "/personalcenter/userInfo"
          });
          break;
        case "messageCenter":
          this.$router.push({
            path: "/personalcenter/message"
          });
          break;
        case "logout":
          this.logout();
          break;
        default:
          break;
      }
    },
    getQrCode() {
      let that = this;
      that
        .$http({
          url: "/wisdomlearn/qrCode/selectQrCode",
          method: "post"
        })
        .then(res => {
          if (res.retCode == "00000" && res.data) {
            that.qrPhoto = res.data.qrPhoto;
          }
          that.loading = false;
        })
        .catch(err => {});
    },
    createQrCode() {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/qrCode/createQrCode",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: that.config.appId,
            userId: that.tool.getCookie("xinyun-front-userInfo") ? JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId : "",
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/qrCode/createQrCode", time),
            timestamp: time
          },
          data: {
            title: that.ruleForm.title,
            content: that.ruleForm.content
          }
        })
        .then(res => {
          if (res.retCode == "00000" && res.data) {
            that.qrPhoto = res.data.qrPhoto;
          }
        })
        .catch(err => {});
    },
    logout() {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/user/v1/loginOut",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: that.config.appId,
            userId: that.tool.getCookie("xinyun-front-userInfo") ? JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId : "",
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/user/v1/loginOut", time),
            timestamp: time
          },
          data: {
            accessToken: that.config.token,
            userId: that.tool.getCookie("xinyun-front-userInfo") ? JSON.parse(that.tool.getCookie("xinyun-front-userInfo")).userId : ""
          }
        })
        .then(res => {
          if (res && res.retCode == "00000") {
            this.tool.delCookie("xinyun-front-token");
            this.tool.delCookie("xinyun-front-userInfo");
            this.tool.delCookie("xinyun-front-answer-time");
            this.config.token = "";
            this.$router.push({
              path: "/home"
            });
            location.reload();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    login() {
      this.type = 0;
      this.$router.push({
        path: "/login"
      });
      this.$emit("openloginBox", 1);
    },
    register() {
      this.type = 1;
      this.$router.push({
        path: "/login"
      });
      this.$emit("openRegisterBox", 2);
    },
    searchCourse() {
      let token = this.config.token;
      if (!token) {
        this.$message({
          message: "您尚未登录，请先登录！",
          type: "error"
        });
        this.$router.push({
          path: "/login"
        });
      } else {
        this.$router.push({
          name: "courseware-search",
          query: { words: this.searchContent }
        });
      }
    }
  }
};
</script>

<style scoped>
.pageHeader {
  height: 96px;
  width: 100%;
  margin: 0 auto;
}
.pageHeader .content {
  min-width: 1200px;
  margin: 0 auto;
  justify-content: space-between;
}
.pageHeader .logo {
  width: 115px;
  height: 80px;
  object-fit: contain;
  cursor: pointer;
}
/* 修改导航 */
.pageHeader .el-menu-item {
  font-size: 20px;
  font-weight: bold;
  color: #3b3b3b;
  padding: 0 10px;
}
.pageHeader .el-menu.el-menu--horizontal {
  border-bottom: none;
}
.pageHeader .el-menu--horizontal > .el-menu-item.is-active {
  color: #1868bb;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 5px solid #084dcd;
}
.pageHeader .input-with-select {
  width: 200px;
}

.pageHeader .loginArea span {
  width: 100px;
  height: 40px;
  color: #084dcd;
  line-height: 40px;
  font-size: 20px;
  font-weight: bold;
  border-radius: 25.5px;
  text-align: center;
  display: inline-block;
  cursor: pointer;
}
.pageHeader .loginArea span.isActive {
  color: #fff;
  background: #3077f8;
}
.avator span {
  margin-left: 10px;
}
</style>
<style>
.pageHeader .input-with-select .el-input__inner {
  border-right: none;
  border-color: #b4b4b4;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
}
.pageHeader .el-input.is-active .el-input__inner,
.el-input__inner:focus {
  border-color: #b4b4b4;
}
.pageHeader .el-input-group__append {
  background: transparent;
  border-color: #b4b4b4;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}
.pageHeader .el-dropdown-link {
  cursor: pointer;
}
.pageHeader .el-dropdown img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.pageHeader .el-dropdown-menu {
  width: 100px;
}
.pageHeader .el-dialog__body img {
  width: 100%;
}
.pageHeader .el-dialog__body {
  padding: 0px 20px 20px;
}
</style>
